<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>数学公式在线编辑</title>

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
	  inlineMath: [['$','$'], ['\\(','\\)']]
	}
  });
</script>
<!-- 
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script src="https://code.jquery.com/jquery-latest.js"></script> 
-->

<script type="text/javascript" async
  src="https://cdn.bootcss.com/mathjax/2.7.4/latest.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script>
window.onload = function(){
  $("#show").click(function() {
    showMath($("#output").val());
  });
};

function showMath(output) {
  var math = "$$" + output + "$$";
  $("#formula").empty();
  $("#formula").append(math);
  MathJax.Hub.Queue(["Typeset", MathJax.Hub, "formula"]);
}
</script>

<style >
  td {min-width: 100px; font-family:"Courier New", Times, serif;}
</style>

</head>
<body>

<p>MathJax（LaTex）公式</p>
<table>
<tr>
<td>
<textarea id="output" rows="8" cols="100" placeholder="在这里输入 MathJax（LaTex）公式，
然后点击“更新公式”按钮，查看公式的显示效果。"></textarea></td>
<td><input id="show" type="button" value="显示公式"/></td>
</tr>
</table>

<div id="formula" style="min-width: 200px"></div>

<p>使用说明：</p>
<ul>
<li>在写wiki的过程中，经常会需要写数学公式，通过本页面，可以快速检验所写公式是否正确。</li>
<li>MathJax的常见用法参考: <a href="https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference">MathJax basic tutorial and quick reference</a></li>
</ul>
</body>
</html>
